<template>
    <div>
        <el-dialog
            :title="isAdd ? '添加菜单' : '编辑菜单'"
            :visible.sync="isShow"
            center
            :show-close="false"
        >
            <el-form
                :model="form"
                :rules="rules"
                label-position="right"
                label-width="100px"
                ref="form"
            >
                <el-form-item label="菜单名称" prop="title">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="上级菜单" prop="pid">
                    <el-select v-model="form.pid" placeholder="请选择上级菜单">
                        <el-option
                            label="顶级菜单"
                            :value="0"
                            v-show="form.type == 1"
                        ></el-option>
                        <el-option
                            v-for="item in menulist"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id"
                            v-show="form.type == 2"
                        ></el-option>
                        <!-- <el-option label="商城管理" value="8"></el-option> -->
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单类型">
                    <template>
                        <el-radio
                            v-model="form.type"
                            :label="1"
                            @change="noPid(0)"
                            >目录</el-radio
                        >
                        <el-radio
                            v-model="form.type"
                            :label="2"
                            @change="noPid(1)"
                            >菜单</el-radio
                        >
                    </template>
                </el-form-item>
                <el-form-item v-if="form.pid == 0" label="菜单图标">
                    <el-input v-model="form.icon"></el-input>
                </el-form-item>
                <el-form-item v-else label="菜单地址">
                    <el-input v-model="form.url"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch
                        v-model="form.status"
                        active-color="#13ce66"
                        :active-value="1"
                        :inactive-value="2"
                    ></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submit" v-if="isAdd"
                    >添 加</el-button
                >
                <el-button type="primary" @click="submit" v-else
                    >修 改</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Vuex from "vuex";
export default {
    data() {
        return {
            // //表单编辑判断数据是否一致
            // editInfo:{},
            //表单的验证规则
            rules: {
                title: [
                    {
                        required: true,
                        message: "请输入菜单名称",
                        trigger: "blur",
                    },
                    {
                        min: 2,
                        max: 6,
                        message: "长度在 2 到 6 个字符",
                        trigger: "blur",
                    },
                ],
                pid: {
                    required: true,
                    message: "请输入上级菜单",
                    trigger: "change",
                },
            },
        };
    },
    props: ["isDialog", "isAdd"],
    methods: {
        ...Vuex.mapMutations({
            //设置一条数据 也就是设置弹框的数据
            setMenuinfo: "menu/setMenuinfo",
        }),

        ...Vuex.mapActions({
            getlist: "menu/menulist_a", //获取菜单列表 接口
            menuadd: "menu/menuadd_a", //获取菜单添加 接口
            menuedit: "menu/menuedit_a", //获取菜单添加 接口
        }),
        //点击取消 弹框消失
        cancel() {
            this.$emit("cancel", false);
            this.reset();
        },
        //reset 重置弹框表单的数据
        reset() {
            this.setMenuinfo({
                id: 0,
                title: "",
                pid: 0,
                icon: "",
                type: 1,
                url: "",
                status: 1,
            });
        },

        //点击菜单类型 取消上级菜单
        noPid(i) {
            this.form.pid = i;
        },
        //点击添加或修改按钮提交
        submit() {
            //通过验证器判断是否符合rules规则
            this.$refs.form.validate(async(vaild) => {
                if (vaild) {
                    //vuex方法,需要去watch监听事件的变化
                    if (this.isAdd) {
                        let res = await  this.menuadd(this.form)
                        console.log(res);
                    } else {
                        this.menuedit(this.form);
                    }
                } else {
                    this.$message.error("输入有误");
                    this.reset();
                    return false;
                }
            });
        },
    },
    computed: {
        //获取菜单列表
        ...Vuex.mapGetters({
            menulist: "menu/getMenulist",
            form: "menu/getMenuinfo",
            menuTitle: "menu/getMenuTitle",
        }),
        //接收传递来的prop属性，
        isShow: {
            get() {
                return this.isDialog;
            },
            set() {
                this.$emit("cancel", false);
            },
        },
    },
    watch: {
        //监听输出的内容是否变化，list组件也会受影响
        menuTitle(val) {
            if (val.code == 200) {
                this.$message.success(val.msg);
                this.cancel();
            } else {
                this.$message.error(val.msg);
                this.reset();
            }
            this.getlist();
        },
    },
    mounted() {
        //获取树状 菜单列表
        this.getlist();
    },
};
</script>

<style scoped></style>
